<template>
    <view class="select-shop">
        <view class="select-shop-title">
            <text>选择门店</text>
            <text class="select-shop-cancel" @click="cancel">取消</text>
        </view>
        <view class="select-shop-search">
            <input class="search-input" type="text" placeholder="请输入门店名称进行搜索" placeholder-style="color: #999999;" v-model="search"/>
            <image class="search-ic" src="../static/ic_search_2.png"></image>
        </view>
        <scroll-view scroll-y style="width: 100%; padding: 20rpx; background-color: white; flex: 1; overflow: scroll; box-sizing: border-box;">
            <view style="display: flex;flex-direction: column;align-items: stretch;">
                <view class="select-shop-item" v-for="(shop, index) in filterStores" :key="index" @click="confirm(shop)">
                    <view class="select-shop-item-name">
                        {{ shop.ShopName }}
                    </view>
                    <view class="select-shop-item-address">
                        {{ shop.Link }} - {{ shop.CorpAddress }}
                    </view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {
            search: '',
        }
    },
    methods: {
        cancel() {
            this.$emit("onCancel");
        },
        confirm(item) {
            this.$emit("onConfirm", {
                ...item,
            });
        },
    },
    computed: {
        ...mapState(["allStores"]),
        filterStores() {
            // console.log("filterStores", this.allStores)
            return this.allStores.filter(item => {
                return item.ShopName.indexOf(this.search) > -1;
            })
        },
    },
}
</script>
<style>
	.select-shop {
		display: flex;
		flex-direction: column;
		font-family: "yshst" !important;
		width: calc(100vw - 70rpx);
		height: calc(100vh - 400rpx);
		overflow: hidden;
		border-radius: 0 0 20rpx 20rpx;
	}
	.select-shop-title {
		height: 80rpx;
		min-height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: aliceblue;
		border-radius: 20rpx 20rpx 0 0;
        position: relative;
	}
    .select-shop-cancel {
        padding: 20rpx;
        /* background-color: red; */
        color: #565656;
        position: absolute;
        left: 15rpx;
        top: 0;
        bottom: 0;
        margin: auto;
    }
    .select-shop-search {
        height: 80rpx;
        background-color: aliceblue;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .search-input {
        height: 100%;
        flex: 1;
        width: 100%;
        padding: 0 20rpx 0 70rpx;
        /* background-color: red; */
    }
    .search-ic {
		z-index: 2;
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		left: 10rpx;
		padding: 11rpx;
		box-sizing: border-box;
		top: 0;
		bottom: 0;
        margin: auto 0;
		/* background-color: red; */
	}
    .select-shop-item {
        /* height: 80rpx; */
        margin-top: 15rpx;
        padding-bottom: 10rpx;
        border-bottom: 1rpx solid #ddd;
        display: flex;
        flex-direction: column;
        align-items: start;
    }
    .select-shop-item-name {
        font-size: 35rpx;
        /* color: aquamarine; */
    }
    .select-shop-item-address {
        font-size: 30rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        color: #565656;
    }
</style>